<script setup>
import {connectWebSocket, textList, speechIng, countdown} from "src/utils/iat/call";
import {reactive,watch} from "vue";
import {conf} from "src/utils/serverHost.js";
import bus from "src/utils/eventBus.js";


let data = reactive({
  speechIng:false,
  questionData:textList,
  thinkIng:false,
  resData:'我是语文老师的小助手，同学们可以向我提问有关语文的任何知识！'
})

// document.addEventListener('keyup', function (event) {
//   if (event.key === ' ') {
//     console.log('空格被放开了');
//     if (data.speechIng) spkEnd()
//     else spk();
//   }
// });

// watch(textList,(newValue, oldValue)=>{
//   data.questionData = newValue;
// })

const spk = () => {
  data.speechIng = true;
  data.questionData = '';
  connectWebSocket();
}
const spkEnd = () => {
  data.speechIng = false;
  // countdown()
  toModel();
}
const toModel = () => {
  data.thinkIng = true;
  fetch('https://agentapi.baidu.com/assistant/getAnswer?appId=5kgTyuXvKneGoRcUaitcg7CK8LTB4JhD&secretKey=AYwyfs5YlbRn1mrOEUpM0njF6dhkYMUe', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      source: "5kgTyuXvKneGoRcUaitcg7CK8LTB4JhD",
      from: "openapi",
      openId: "19920802",
      message: {
        content: {
          type: "text",
          value: {
            showText: data.questionData
          }
        }
      },
    })
  }).then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.text(); // 或者 response.json() 取决于服务器返回的数据类型
  })
    .then(res => {
      data.thinkIng = false;
      data.resData = JSON.parse(res).data.content[0].data
    })
    .catch(error => {
      data.thinkIng = false;
      console.error('There has been a problem with your fetch operation:', error);
    });
}
</script>

<template>
  <div class="out">
      <div class="tit">
          <span>镇宁自治县第五小学</span>
          <span class="t1">六年级四班</span>
      </div>
    <div class="min">
      <div class="me">
        <img src="../../assets/images/student.png" alt="">
        <div class="me-say">
          <input v-model="data.questionData" @keydown.enter="spkEnd" placeholder="点我开始提问哦！"/>
        </div>
      </div>
      <div class="robot" v-if="data.thinkIng">
        请等等，我要思考一下...
      </div>
      <div class="robot" v-else>
        {{data.resData}}
      </div>
      <div class="say3" @click="spk"></div>
      <div class="say2" @click="spkEnd"></div>
      <div class="say1" @click="toModel"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.out{
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  background-image: url("../../assets/images/miz51_1258025_29612847560.gif");
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .tit{
    position: absolute;
    left: 20px;
    top: 40px;
    font-size: 36px;
    font-weight: bold;
    color: #433f3a;
    .t1{
      font-size: 24px;
      padding-left: 20px;
    }
  }
  .min{
    width: 70%;
    height: 500px;
    //border: 1px solid #26A69A;
    position: relative;
    top:-100px;
    .me{
      display: flex;
      img{
        width: 50px;
        height: 50px;
      }
      .me-say{
        max-width: calc(100% - 50px);
        min-width: 300px;
        border-radius: 10px;
        height: 50px;
        box-shadow: 3px 3px 3px #a3a6a6;
        margin-left: 20px;
        background-color: #ececec;
        padding: 0 20px;
        font-size: 16px;
        input{
          height: 50px;
          border:0;
          background: none!important;
          outline: none;
        }
      }
    }
    .robot{
      font-size: 16px;
      margin-top: 50px;
      padding: 20px;
      width: 80%;
      height: 200px;
      background-color: #dfdfdf;
      border-radius: 20px;
      box-shadow: 3px 3px 3px #c1c1c1;
    }
    .say3{
      width: 100px;
      height: 50px;
      background-color: #dfdfdf;
      margin-left: 50%;
      margin-top: 20px;
      border-radius: 50%;
      box-shadow: 3px 3px 3px #c1c1c1;
    }
    .say2{
      width: 50px;
      height: 20px;
      background-color: #dfdfdf;
      margin-left: 53%;
      margin-top: 20px;
      border-radius: 50%;
      box-shadow: 3px 3px 3px #c1c1c1;
    }
    .say1{
      width: 20px;
      height: 10px;
      background-color: #dfdfdf;
      box-shadow: 3px 3px 3px #c1c1c1;
      margin-left: 55%;
      margin-top: 20px;
      border-radius: 50%;
    }
  }
}
</style>
